<template lang="html">
  <div class="container">
    <div>
      <movie-index-header ></movie-index-header>   <!--  展示引入的header组件 -->
    </div>
    <div class="userMessage">
      <user-message></user-message>
    </div>
    <div class="contentPic">
      <index-header-pic></index-header-pic>
    </div>
    <div class="contentMain" >
      <div>
        <div class="contentLeft">
          <ul class="cont-ul">
            <movies-list></movies-list>
          </ul>
        </div>
      </div>
      <div>
        <div class="contentRight">
          <ul class="cont-ul">
            <news-list></news-list>
          </ul>
        </div>
      </div>
    </div>
    <common-footer></common-footer>  <!--  展示引入的footer组件 -->
  </div>
</template>

<script>
    import MovieIndexHeader from '@/components/MovieIndexHeader'
    import CommonFooter from '@/components/CommonFooter'
    import NewsList from '@/components/NewsList'
    import MoviesList from '@/components/MoviesList'
    import IndexHeaderPic from '@/components/IndexHeaderPic'
    import UserMessage from '@/components/UserMessage'
    export default {
        name: "index",
        data () {
          return {
            headerItems:[],
            newsItems:[],
            movieItems:[]
          }
        },
        components: {
          MovieIndexHeader,
          CommonFooter,
          NewsList,
          MoviesList,
          IndexHeaderPic,
          UserMessage
        },
        // 这里用于获取数据，需要获得主页推荐，主页新闻列表，主页电影列表
        created () {
          // 主页推荐
          this.axios.get('http://localhost:3000/showIndex').then((data) => {
            this.headerItems = data.body.data;
            console.log( data.body.data)
          })
          // 获取新闻
          this.axios.get('http://localhost:3000/showArticle').then((data) => {
            this.newsItems = data.body.data;
            console.log(data.body)
          })
          //    获取所有电影
          this.axios.get('http://localhost:3000/showRanking').then((data) => {
            this.movieItems = data.body.data;
            console.log( data.body)
          })
        },
    }
</script>

<style lang="css" scoped>
  .container {
    width: 100%;
    margin: 0 auto;
  }
  .contentMain{
    padding-top: 15px;
  }
  .userMessage{
    margin-top:0px;
    margin-left: 0px;
  }
  .contentPic{
    padding-top:5px;
  }
  .contentLeft{
    width: 60%;
    float: left;
    margin-top: 5px;
    border-top: 1px solid #000;
  }
  .contentRight{
    width: 38%;
    margin-left: 1%;
    float: left;
    margin-top: 5px;
    border-top: 1px solid #000;
  }
  .cont-ul {
    padding-top: 0.5rem;
    background-color: #fff;
  }
  .cont-ul::after {
    content: '';
    display: block;
    clear: both;
    width: 0;
    height: 0;
  }
</style>
